<template>
    <div>
        <div class="flex flex-jc-sb items-center">
            <div>{{ title }}</div>
            <slot name="right">
                <el-select v-model="sltVal" size="small" @change="handleChange">
                    <el-option v-for="(item, index) in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </slot>
        </div>
        <div class="flex flex-wrap mg-t-20 gap-16px">
            <template v-for="(i, index) in list" :key="index">
                <div class="flex-item"
                    :class="{ 'full-item': (type === 'fullStart' && index === 0) || (type === 'fullEnd' && index === list.length - 1) }">
                    <div class="fs-14 fc-grey">
                        <span>{{ i.name }}</span>
                    </div>
                    <div class="mg-t-10">
                        <span class="fs-12">{{ i.prefix }}</span>
                        <span class="fs-16 bold">{{ i.value }}</span>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
    title: {
        type: String
    },
    list: {
        type: Array
    },
    type: {
        type: String,
        default: ''
    },
    selectValue: {
        type: [String, Number]
    }
})

const emits = defineEmits(['update:selectValue', 'change'])

const sltVal = ref('')

const options = ref([
    {
        label: '昨天',
        value: 1,
    },
    {
        label: '上周',
        value: 2,
    },
    {
        label: '本月',
        value: 3,
    }
])

const emitsData = () => {
    emits('update:selectValue', sltVal.value)
    emits('change', sltVal.value)
}

const handleChange = () => {
    emitsData()
}

watch(() => props.selectValue, (newval) => {
    sltVal.value = newval
}, {
    immediate: true
})

</script>
<style lang="scss" scoped>
.flex-item {
    background: #eee;
    border-radius: 10px;
    padding: 16px;
    flex-basis: calc(50% - 10px);
    box-sizing: border-box;
}

.full-item {
    flex-basis: 100%;
}
</style>